<template>
    <div class="bg-white" style="margin:-20px;margin-top:-1rem;margin-bottom:0!important">
        <el-tabs v-model='activeName' class="ml-2">
            <el-tab-pane label="注册与访问" name="first">
                <el-form ref="form" :model="form" label-width="130px">
                    <el-form-item label="是否允许注册会员">
                        <el-radio-group v-model="form.open_reg">
                            <el-radio-button :label="1">是</el-radio-button>
                            <el-radio-button :label="0">否</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="注册类型">
                        <el-radio-group v-model="form.reg_method">
                            <el-radio-button label="username">普通注册</el-radio-button>
                            <el-radio-button label="phone">手机注册</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="密码最小长度">
                        <el-input type='number' v-model="form.password_min" size='mini' style='width:25%'></el-input>
                    </el-form-item>
                    <el-form-item label="强制密码复杂度">
                        <el-checkbox-group v-model="form.password_encrypt">
                            <el-checkbox-button label="0">数字</el-checkbox-button>
                            <el-checkbox-button label="1">小写字母</el-checkbox-button>
                            <el-checkbox-button label="2">大写字母</el-checkbox-button>
                            <el-checkbox-button label="3">符号</el-checkbox-button>
                        </el-checkbox-group>
                    </el-form-item>
                    <!-- 公用的 -->
                    <!-- <el-form-item>
                        <el-button type='primary' size='mini'>保存</el-button>
                    </el-form-item> -->
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="上传设置" name="second">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item label="默认上传方式">
                        <el-radio-group v-model="form.upload_method">
                            <el-radio-button label="local">本地存储</el-radio-button>
                            <el-radio-button label="oss">阿里oss</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <template v-if="form.upload_method === 'oss'">
                        <el-form-item label="Bucket">
                            <el-input type='number' v-model="form.upload_config.bucket" size='mini'
                                style='width:25%'></el-input>
                        </el-form-item>
                        <el-form-item label="ACCESS_KEY">
                            <el-input type='number' v-model="form.upload_config.ACCESS_KEY" size='mini'
                                style='width:25%'></el-input>
                        </el-form-item>
                        <el-form-item label="SECRET_KEY">
                            <el-input type='number' v-model="form.upload_config.SECRET_KEY" size='mini'
                                style='width:25%'></el-input>
                        </el-form-item>
                        <el-form-item label="空间域名">
                            <el-input type='number' v-model="form.http" size='mini' style='width:25%'>
                            </el-input>
                            <small class="text-secondary d-block">空间域名</small>
                        </el-form-item>
                    </template>
                    <!-- <el-form-item>
                        <el-button type='primary' size='mini'>保存</el-button>
                    </el-form-item> -->
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="API安全" name="third">
                <el-form ref="form" :model="form" label-width="130px">
                    <el-form-item label="是否开启Api安全">
                        <el-radio-group v-model="form.api_safe">
                            <el-radio-button :label="1">是</el-radio-button>
                            <el-radio-button :label="0">否</el-radio-button>
                        </el-radio-group>
                        <small class="text-secondary d-block">api安全功能开启之后调用前端api需要传输签名串</small>
                    </el-form-item>
                    <el-form-item label="秘钥">
                        <el-input type='number' v-model="form.api_secret" size='mini' style='width:25%'></el-input>
                        <small class="text-secondary d-block">填写秘钥</small>
                    </el-form-item>
                    <!-- <el-form-item>
                        <el-button type='primary' size='mini'>保存</el-button>
                    </el-form-item> -->
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <el-form>
            <el-form-item label-width="160px">
                <el-button type='primary' size='mini' @click="submit">保存</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<script>
export default {
    name: 'baseIndex',
    inject: ['layout'],
    data() {
        return {
            activeName: 'first',
            form: {
                open_reg: '1',
                reg_method: 'username',
                password_min: '',
                password_encrypt: [''],
                upload_method: 'local',
                upload_config:
                {
                    Bucket: "",
                    ACCESS_KEY: "",
                    SECRET_KEY: "",
                    http: ""
                },

                api_safe: '',
                api_secret: ''
            }
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            this.layout.showLoading()
            this.$axios.get('/admin/sysconfig', {
                token: true
            }).then(res => {
                // console.log(res);
                this.layout.hideLoading()
                this.form = res.data.data
                if (typeof this.form.password_encrypt === 'string') {
                    this.form.password_encrypt = this.form.password_encrypt.split(',')
                } else if (!Array.isArray(this.form.password_encrypt)) {
                    this.form.password_encrypt = []
                }
                //this.form.password_encrypt = this.form.password_encrypt.split(',')
            }).catch(() => {
                this.layout.hideLoading()

            })
        },
        submit() {
            this.layout.showLoading()
            // this.form.password_encrypt = this.form.password_encrypt.join(',')
            if (Array.isArray(this.form.password_encrypt)) {
                this.form.password_encrypt = this.form.password_encrypt.join(',')
            }
            this.$axios.post('/admin/sysconfig', this.form, {
                token: true
            }).then(() => {
                this.$message.success('修改成功')
                this.getData()
                this.layout.hideLoading()
            }).catch(() => {
                this.layout.hideLoading()
            })
        }
    }

}
</script>